<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>绘制控件的添加和删除</title>
  <!-- <link rel="stylesheet" href="https://minedata.cn/nce-static/support/demo/js-api/zh/css/demo.css">
  <link rel="stylesheet" href="https://minedata.cn/nce-static/support/demo/js-api/zh/css/iconfont/iconfont.css">
  <script src="https://minedata.cn/nce-static/support/demo/js-api/zh/js/demo.js"></script> -->
  <!-- 引入MineMap API插件 -->
  <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.1.1/minemap.css" />
  <link rel="stylesheet" href="https://minedata.cn/minemapapi/minemap-plugins/edit/minemap-edit.css" />
  <script src="https://minedata.cn/minemapapi/v2.1.1/minemap.js"></script>
  <script src="https://minedata.cn/minemapapi/minemap-plugins/edit/minemap-edit.js"></script>
  <style>
    #map {
      width: 100%;
      height: 100%;
    }

    .edit-ctrl-group {
      position: absolute;
      z-index: 300;
      top: 10px;
      right: 10px;
      width: 32px;
      overflow: hidden;
    }

    .edit-btn {
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
      color: #111;
      background-color: white;
      border: 1px solid #ddd;
    }

    .edit-btn:hover {
      background-color: #efefef;
    }

    .card-top-right {
      width: 140px;
      top: 10px;
      right: 54px;
    }

    .demo-btn {
      width: 140px;
    }

    .card-btn-group {
      padding: 0;
    }
  </style>
</head>

<body>
  <div class="card-panel card-panel-top-left">
    <div class="card-btn-group" style="justify-content: space-around;">
      <button onclick="addEditControl()" class="demo-btn" style="margin-right: 10px;">添加编辑控件</button>
      <button onclick="delEditControl()" class="demo-btn">删除编辑控件</button>
    </div>
  </div>
  <div id="map">
    <div id="edit-ctrl-group" class="edit-ctrl-group">
      <div class="edit-btn" title="画点" onclick="onEditBtnClick('point')"><span class="iconfont icon-draw-point" /></div>
      <div class="edit-btn" title="画线" onclick="onEditBtnClick('line')"><span class="iconfont icon-draw-line" /></div>
      <div class="edit-btn" title="画圆弧" onclick="onEditBtnClick('arc')"><span class="iconfont icon-draw-curve" /></div>
      <div class="edit-btn" title="画多边形" onclick="onEditBtnClick('polygon')"><span
          class="iconfont icon-draw-polygon1" /></div>
      <div class="edit-btn" title="画矩形" onclick="onEditBtnClick('rectangle')"><span class="iconfont icon-draw-square" />
      </div>
      <div class="edit-btn" title="画三角形" onclick="onEditBtnClick('triangle')"><span class="iconfont icon-Triangle" />
      </div>
      <div class="edit-btn" title="画圆" onclick="onEditBtnClick('circle')"><span class="iconfont icon-draw-circle" />
      </div>
      <div class="edit-btn" title="删除所选" onclick="onEditBtnClick('trash')"><span class="iconfont icon-tool-delete" />
      </div>
      <div class="edit-btn" title="撤销上一步操作" onclick="onEditBtnClick('undo')"><span class="iconfont icon-undo" /></div>
      <div class="edit-btn" title="重复上一步操作" onclick="onEditBtnClick('redo')"><span class="iconfont icon-redo" /></div>
    </div>
  </div>
  <script>
    /* minemap-edit api文档访问地址'https://minedata.cn/minemapapi/minemap-plugins/edit/edit-api.html' */

    /**
     * 全局参数设置
     */
    minemap.domainUrl = 'https://minedata.cn';
    minemap.dataDomainUrl = 'https://minedata.cn';
    minemap.serverDomainUrl = 'https://ol-data.minedata.cn';
    minemap.spriteUrl = 'https://minedata.cn/minemapapi/v2.1.1/sprite/sprite';
    minemap.serviceUrl = 'https://service.minedata.cn/service';

    minemap.key = '<您的 key>';
    minemap.solution = 11001;

    var map = new minemap.Map({
      container: 'map',
      style: 'https://service.minedata.cn/map/solu/style/11001',
      center: [116.46, 39.92],
      zoom: 14,
      pitch: 0,
      maxZoom: 17,
      minZoom: 3,
      projection: 'MERCATOR'
    });

    var edit = null;

    function delEditControl() {
      if (map && edit) {
        edit.dispose();
        edit = null;
        document.getElementById('edit-ctrl-group').style.display = 'none';
      }
    }

    function addEditControl() {
      delEditControl();
      if (map) {
        edit = new minemap.edit.init(map, {
          boxSelect: true,    /* 是否支持拉框选择 */
          touchEnabled: true,    /* 是否支持手指触屏 */
          displayControlsDefault: false,   /* 是否启用编辑控件 */
          showButtons: false  /* 是否启用默认控件按钮 */
        });
        document.getElementById('edit-ctrl-group').style.display = 'block';
      }
    }

    map.once('load', () => {
      addEditControl();
    })

    function onEditBtnClick(mode) {
      if (edit && mode) {
        edit.onBtnCtrlActive(mode);
      }
    }

    window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
      if (scriptURI.indexOf('minemap-edit') > -1) {
        message.error(errorObj.message);
      }
    };

  </script>
</body>